<template>
  <div>
    <!-- v-model可以双向绑定数据，数据可以驱动视图，视图中的数据发生变化也能够影响data中的数据 -->
    <!-- 注意：v-model会忽略掉一些默认自带属性比如value，checked -->
    <!-- input 实时更新表单里的内容  @input='lastHTML'  change 移开后更新  -->
    <input type="text"  :value="msg" @input='lastHTML'>
    <input type="text" :value="msg"   @change="changeHtml">
   <!-- 阻止默认提交 -->
    <form @submit.prevent="login">
      <!-- 过滤首尾空白字符 trim -->
        <input type="text" name="username" v-model.trim.lazy="adc.username">
      <!-- 将用户输入的值转换为数字型 -->
        <input type="text" name="password" v-model.number.trim="adc.password" value="123">
      <!-- 复选框 -->
        <input type="checkbox" checked v-model="adc.flag">
        <button>提交</button>
    </form>
   </div>
</template>
 
<script>
export default {
    data() {
    return {
        msg:'杭州的第一场雪',

        adc:{
            username:'',
            password:'',
            flag:false
        }
    };
  },

  methods: {
    login(e) {
        e.preventDefault()
        /* console.log(this.adc.username);
        console.log(this.adc.password); */
    },
    lastHTML(e) {
        console.log(e.target.value);
      
       
    },
 /*    changeHtml(e){
      console.log(e.target.value);
      
    } */
  }
};
</script>

<style scoped>
     
</style>